room-editor
    display flex
    flex-direction row
    .room-editor-TypeSwatches .aSearchWrap
        display block
        flex 1 1 100%
        margin 0 0 3px
        input
            box-sizing border-box
            width 100%
            font-size 90%
            border-radius 0
    .toolbar
        display flex
        flex-direction column
        padding 0.5em
        width 17em
        box-sizing border-box
        flex 0 0 auto
        flex-grow 0
        .settings .fifty
            padding 0.5rem
        .palette
            flex 1 1 auto
        .settings button
            margin 0.5em 0
        .nav
            border-bottom-right-radius 0
            border-bottom-left-radius 0
    .palette
        position relative
        .tabwrap
            position absolute
            left 0
            right 0
            top 0
            bottom 0
    .editor
        display flex
        position relative
        flex 1 1 auto
        .shift
            position absolute
            top 0.5rem
            left 0.5rem
        .shift, .center
            span
                text-shadow 0 1px 0 background
        .zoom
            position absolute
            top 0.5rem
            right 0.5rem
            b
                text-shadow 0 1px 0 background
            zoom-slider
                width 20rem
        .grid
            position absolute
            bottom 0.5rem
            right 0.5rem
        .center
            position absolute
            bottom 0.5rem
            left 0.5rem
        canvas
            width 100%
            height 100%

.room-editor-TypeSwatches, .room-editor-Backgrounds, .room-editor-Tiles
    overflow-y scroll
    position absolute
    width 100%
.room-editor-TypeSwatches
    padding 0 0 0 1px !important
    display flex
    flex-flow row wrap
    align-content start
    align-items flex-start
.room-editor-aTypeSwatch
    list-style none
    border 1px solid borderPale
    flex 1 0 5rem
    display inline-block
    box-sizing border-box
    text-align center
    margin -1px 0 0 -1px
    cursor pointer
    padding 1.75rem 0.4em 0
    font-size 80%
    line-height 1.7
    {trans}
    position relative
    z-index 1
    svg
        width 2.5rem
        height @width
        color act
        line-height 3rem
        margin 1.35rem auto 0
        display block
        padding-bottom 0.5rem
    span
        display block
        text-overflow ellipsis
        overflow hidden
        width auto
        position absolute
        left 0.5rem
        top 0.25rem
        right 0.5rem
    &:hover
        border-color act
        z-index 10
        {transshort}
    &.active
        border-color accent1
        z-index 10
    img
        height 64px
        width 64px
    &.filler
        height 0
        visibility hidden

.room-editor-Backgrounds
    &.tabbed
        padding 0.5rem
    ul
        margin 0
        padding 0
    .bg
        list-style none
        padding 0.3em 0.8em
        border-radius br
        border 1px solid borderBright
        margin-bottom 0.2em
        img
            float left
            width 64px
            height 64px
            border-radius br
            cursor pointer
            margin-right 1rem
        & > span
            display block
            vertical-align middle
            margin-top 1em
            span
                cursor pointer
                {trans}
                float right
                margin-left 0.5rem
            .active
                color act
        label + label
            margin-top 0
        .fifty
            padding 0.5rem 0.25rem

.room-editor-Tiles
    canvas
        cursor pointer
        min-width 100%
    .act
        color text
        cursor pointer
        display inline-block
        padding 0.35rem 0
        line-height 1
        margin-left 0.5rem
        {trans}
        &:hover
            color act
            {transshort}
    .flexfix-footer button
        margin-bottom 0.25rem
    select
        padding 0.25rem
